<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <div class="ft-dashboard" v-if="widgets.length">
      <grid-layout :layout="widgets" :col-num="24" :row-height="rowHeight" :is-draggable="editable"
                   :is-resizable="editable"
                   :is-mirrored="false" :vertical-compact="true" :margin="margin" :use-css-transforms="false">
        <grid-item v-for="item in widgets" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i"
                   :style="editable?'border-width: 1px;border-style: dashed;border-color: #55a532':'border:none'">
          <div class="ft-dashboard-widget" v-loading="!item.load" element-loading-spinner="el-icon-loading">
            <div class="grid-mask" v-if="editable"
                 :style="{'background-color': item.maskVisible?'#88888888':'#ffffff00'}"
                 @mouseenter="$set(item, 'maskVisible', true)" @mouseleave="$set(item, 'maskVisible', false)">
              <el-button v-if="item.maskVisible" icon="el-icon-delete" @click="removeWidget(item.i)"></el-button>
            </div>
            <iframe class="ft-dashboard-iframe" :key="item.i" :src="item.routeUrlStub" @load="loaded(item)"></iframe>
          </div>
        </grid-item>
      </grid-layout>
    </div>
    <div v-else class="dashboardImg">
      <img src="../assets/dashBoard.png"/>
    </div>
  </div>
</template>

<script>
  import {GridLayout, GridItem} from 'vue-grid-layout'
  import VueResizeSensor from 'vueresizesensor'
  import DashboardAppletCategorySelect from "./DashboardAppletSelect";
  import DashboardWidgetSelect from "./DashboardWidgetSelect";

  export default {
    name: "Dashboard",
    props: {
      widgets: {
        type: Array,
        default() {
          return []
        }
      },
      editable: {
        type: Boolean,
        default: false
      }
    },
    mounted() {

    },
    components: {
      DashboardWidgetSelect,
      DashboardAppletCategorySelect,
      GridLayout, GridItem, VueResizeSensor
    },
    data() {
      return {
        loading: true,
        selectedApplet: null,
        rowHeight: 60,
        margin: [0, 0],
      }
    },
    methods: {
      // 布局中移除应用
      removeWidget(i) {
        for (let j in this.widgets) {
          const widget = this.widgets[j]
          if (widget.i === i) {
            //移除布局中的应用
            this.widgets.splice(j, 1)
            break
          }
        }
      },
      loaded(item, i) {
        if (item.routeUrlStub) {
          this.$set(item, 'load', true)
        } else {
          this.$set(item, 'routeUrlStub', item.routeUrl)
        }
      }
    }
  }
</script>

<style>
  .ft-dashboard .grid-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ft-dashboard {
    background-color: #f4f8f9;
  }

  .ft-dashboard-widget .el-loading-mask {
    right: 24px;
    bottom: 24px;
  }

  .ft-dashboard-widget {
    width: 100%;
    height: 100%;
    padding: 0 24px 24px 0;
    overflow: hidden
  }

  .ft-dashboard-iframe {
    margin: 0;
    border: none;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14);
    overflow: hidden;
  }

  /* .ft-dashboard-iframe:hover{
    transition: all 0.3s;
  } */
  .vue-resizable-handle {
    z-index: 2;
  }

  .dashboardImg {
    display: flex;
    justify-content: center;
    margin-top: 80px;
  }

  .dashboardImg img {
    height: 280px;
    width: 360px;
  }
</style>
